<script setup>
import * as monaco from 'monaco-editor'
import { nextTick, onMounted, reactive, ref, toRaw } from 'vue'

const editor = ref(null);
const script = reactive({
  originScript: '#!/usr/bin/env python3\n' +
    '# -*- coding: utf-8 -*-\n' +
    '\n' +
    'from email import encoders\n' +
    'from email.header import Header\n' +
    'from email.mime.text import MIMEText\n' +
    'from email.utils import parseaddr, formataddr\n' +
    'import smtplib\n' +
    '\n' +
    'def _format_addr(s):\n' +
    '    name, addr = parseaddr(s)\n' +
    '    return formataddr((Header(name, \'utf-8\').encode(), addr))\n' +
    '\n' +
    'from_addr = input(\'From: \')\n' +
    'password = input(\'Password: \')\n' +
    'to_addr = input(\'To: \')\n' +
    'smtp_server = input(\'SMTP server: \')\n' +
    '\n' +
    'msg = MIMEText(\'hello, send by Python...\', \'plain\', \'utf-8\')\n' +
    'msg[\'From\'] = _format_addr(\'Python爱好者 <%s>\' % from_addr)\n' +
    'msg[\'To\'] = _format_addr(\'管理员 <%s>\' % to_addr)\n' +
    'msg[\'Subject\'] = Header(\'来自SMTP的问候……\', \'utf-8\').encode()\n' +
    '\n' +
    'server = smtplib.SMTP(smtp_server, 25)\n' +
    'server.set_debuglevel(1)\n' +
    'server.login(from_addr, password)\n' +
    'server.sendmail(from_addr, [to_addr], msg.as_string())\n' +
    'server.quit()',
  editorScript: '#!/usr/bin/env python3\n' +
    '# -*- coding: utf-8 -*-\n' +
    '\n' +
    'from email import encoders\n' +
    'from email.header import Header\n' +
    'from email.mime.text import MIMEText\n' +
    'from email.utils import parseaddr, formataddr\n' +
    'import smtplib\n' +
    '\n' +
    'def _format_addr(s):\n' +
    '    name, addr = parseaddr(s)\n' +
    '    return formataddr((Header(name, \'utf-8\').encode(), aaaddr))\n' +
    '\n' +
    'from_addr = input(\'From: \')\n' +
    'password = input(\'Password: \')\n' +
    'to_addr =ut(\'To: \')\n' +
    'smtp_server = input(\'SMTP server: \')\n' +
    'aesw' +
    '\n' +
    'msg = MIMEText(\'hello, send by Python...\', \'plain\', \'utf-8\')\n' +
    'msg[\'From\'] = _format_addr(\'Python爱好者 <%s>\' % from_addr)\n' +
    'msg[\'To\'] = _format_addr(\'管理员 <%s>\' % to_addr)\n' +
    'msg[\'Subject\'] = Header(\'来自SMTP的问候……\', \'utf-8\').encode()\n' +
    '\n' +
    'server = smtplib.SMTP(smtp_server, 25)\n' +
    'server.set_debuglevel(1)\n' +
    'server.login(from_addr, password)\n' +
    'server.sendmail(from_addr, [to_addr], msg.as_string())\n' +
    'server.quit()'
})

const createMarkButton = (markInfo) => {
  const {startLineNumber} = markInfo
  const markEl = document.createElement('div');
  markEl.classList = [`mark-el mark-el-${startLineNumber}`];
  markEl.style.position = 'absolute';
  markEl.style.left = '0px';
  markEl.style.width = '18px'
  markEl.style.height = '18px'
  markEl.style.backgroundColor = 'red';
  markEl.style.borderRadius = '50%';
  markEl.style.transform = 'translateY(-100%)';
  markEl.style.zIndex = 1;
  markEl.style.cursor = 'pointer';
  markEl.onclick = () => {
    console.log(markInfo)
  }
  return markEl
}
const setMarkerButton = ({startLineNumber, ...markInfo}) => {
  const codeBox =  document.getElementById('editor')
  const lineList = document.getElementById('editor').getElementsByClassName('view-line');
  const markParent = lineList[startLineNumber];
  // console.log(markParent.style.offsetHeight, markParent.style.offsetWidth)
  const markEl = createMarkButton(markInfo);
  markEl.style.top = markParent.style.top;
  codeBox.appendChild(markEl);

}

const setMark = async (markInfo) => {
  // const model = toRaw(editor.value).getModel();
  // monaco.editor.setModelMarkers(
  //   model,
  //   '',
  //   [{
  //     severity: 'Error',
  //     ...markInfo
  //   }]
  // )
  await nextTick();
  window.requestAnimationFrame(() => {
    setMarkerButton({...markInfo})
  })
}

const addmark = () => {
  const markInfo = [
    {
      startLineNumber: 4,
      endLineNumber: 6,
      startColumn: 1,
      endColumn: 100,
      message: '这是第一个错误',
      modelVersionId: 1
    }, {
      startLineNumber: 13,
      endLineNumber: 16,
      startColumn: 1,
      endColumn: 100,
      message: '这是第二二个错误',
      modelVersionId: 2
    },{
      startLineNumber: 23,
      endLineNumber: 26,
      startColumn: 1,
      endColumn: 100,
      message: '这是第三三三个错误',
      modelVersionId: 3
    }
  ]
  markInfo.forEach((item) => {
    setMark(item)
  })
}
const initEditor = async () => {
  editor.value = monaco.editor.create(document.getElementById('editor'), {
    value: script.originScript,
    language: 'python'
  })
  await nextTick();
  addmark()
}

const initDiffMerge =async () => {
  editor.value = monaco.editor.createDiffEditor(document.getElementById('editor'), {
    value: script.originScript,
    language: 'python',
    readOnly: true,
    diffCodeLens: true,
    minimap: {
      enabled: false
    }
  }).setModel({
    original:  monaco.editor.createModel(script.originScript, 'python'),
    modified: monaco.editor.createModel(script.editorScript, 'python')
  })
  await nextTick();
}
onMounted(() => {
  initDiffMerge()
})
</script>

<template>
  <div style="width: 100vw; height: 100vh">
    <div id="editor" style="height: 100%; width: 100%"></div>
  </div>

</template>

<style scoped >
#editor {
  position: relative;
}

</style>
